<template>
	<view class="addAddress">
		<view class="addAddress_content df df-align-items">
			<text>收货姓名：</text>
			<input type="text" placeholder="请输入收货人姓名" v-model="from.name">
		</view>

		<view class="addAddress_content df df-align-items">
			<text>联系方式：</text>
			<input type="number" placeholder="请输入电话号码" v-model="from.mobile">
		</view>

		<!-- <view class="addAddress_content df df-align-items">
			<text>收货地址：</text>
			<picker mode="multiSelector" :range="multiArray" :value="mulitiIndex" @columnchange="multiColumn"
				@change="multiChange">
				<view :class="address==null ? 'container-wrap-highest': ''">
					{{address || '请选择省市区'}}
				</view>
			</picker>
		</view> -->

		<view class="addAddress_content df df-align-items">
			<text>详细地址：</text>
			<textarea placeholder="小区楼栋/乡村名称" v-model="from.detail"></textarea>
		</view>

		<!-- <view class="addAddress_content df df-align-items">
			<text>是否设为默认地址：</text>
			<switch :checked="isCheck" @change="switchChange" style="transform:scale(0.7)" />
		</view> -->



		<view class="df df-justify-content">
			<view class="pay_btn" @click="submitFrom">保存</view>
		</view>

	</view>
</template>

<script>
	import api from '@/api/mine.js'
	export default {
		data() {
			return {
				address: '', //详细地址
				multiArray: [],
				mulitiIndex: [0, 0, 0],
				multiId: [],
				isCheck: false,
				from: {
					name: '',
					mobile: '',
					detail: '',
					// is_default: ''
				}
			}
		},

		onLoad() {
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({ canPullDown:false });
			// #endif
		},

		methods: {
			// switchChange(e) {
			// 	if (e.detail.value) {
			// 		this.isCheck = true
			// 		this.from.is_default = 1
			// 	} else {
			// 		this.isCheck = false
			// 		this.from.is_default = 0
			// 	}
			// },

			async submitFrom() {
				// if (this.isCheck) {
				// 	this.from.is_default = 1
				// } else {
				// 	this.from.is_default = 0
				// }
				
				let res = await api.addAddress(this.from)
				
				if(res.code == 1){
					uni.setStorageSync('address_id', res.data.address_id)
					uni.showToast({
						title: res.msg,
						icon:'none'
					})
					setTimeout(()=> {
						uni.switchTab({
							url: '/pages/mine/index'
						});
					},1500)
				}else{
					uni.showToast({
						title: res.msg,
						icon:'error'
					})
				}
			},


			async getAddressApi(address, id) {
				let res = await api.getAddress({
					pid: id
				})
				if (res.code == 1) {
					let data = res.data
					let arr = []
					let id = []
					data.map(item => {
						arr.push(item.name)
						id.push(item.id)
					})
					if (address == 'province') {
						this.multiArray[0] = arr
						this.multiId[0] = id
					}
					if (address == 'city') {
						this.multiArray[1] = arr
						this.multiId[1] = id
						this.mulitiIndex[1] = 0
						this.$forceUpdate()
					}
					if (address == 'area') {
						this.multiArray[2] = arr
						this.multiId[2] = id
						this.mulitiIndex[2] = 0
						this.$forceUpdate()
					}

				}
			},

			// 省市改变
			multiColumn(e) {
				let column = e.detail.column
				let index = e.detail.value
				let id = ''

				if (column == 0) {
					this.mulitiIndex[0] = index
					id = this.multiId[0][index]
					this.getAddressApi('city', id)
				}
				if (column == 1) {
					this.mulitiIndex[1] = index
					id = this.multiId[1][index]
					this.getAddressApi('area', id)
				}
				if (column == 2) {
					this.mulitiIndex[2] = index
				}
			},


			multiChange(e) {
				this.address = this.multiArray[0][this.mulitiIndex[0]] + '-' + this.multiArray[1][this.mulitiIndex[1]] +
					'-' + this.multiArray[2][this.mulitiIndex[2]]
				this.from.province_id = this.multiId[0][this.mulitiIndex[0]]
				this.from.city_id = this.multiId[1][this.mulitiIndex[1]]
				this.from.area_id = this.multiId[2][this.mulitiIndex[2]]
			}
		},
	}
</script>

<style lang="scss" scoped>
	.addAddress {
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;

		.addAddress_content {
			margin-bottom: 40rpx;

			text {
				font-weight: bold;
				flex: 1;
			}

			input {
				flex: 3;
				height: 80rpx;
				background: #f7f7f7;
				padding-left: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				border-radius: 20rpx;
			}

			textarea {
				flex: 3;
				background: #f7f7f7;
				height: 200rpx;
				font-size: 28rpx;
				border-radius: 20rpx;
				padding-left: 20rpx;
				padding-top: 20rpx;
			}

			picker {
				flex: 3;
				height: 80rpx;
				background: #f7f7f7;
				padding-left: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				padding-top: 20rpx;
				border-radius: 20rpx;
			}
		}

		.pay_btn {
			width: 40%;
			position: fixed;
			bottom: 20rpx;

			height: 100rpx;
			border-radius: 60rpx;
			background: #4395ff;
			color: #FFF;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/deep/ .uni-data-tree-input {
			width: 400rpx;
		}
	}
</style>
